<template>
  <a-form
    layout="inline"
    style="margin-bottom: 15px;"
  >
    <a-form-item label="文章ID" name="username">
      <a-input v-model:value="formQuery.username" placeholder="请选择角色类型" />
    </a-form-item>
    <a-form-item label="标签分类" name="roleType">
      <a-select style="width: 200px;" v-model:value="formQuery.labelType">
        <a-select-option value="qianduan">前端选刊</a-select-option>
        <a-select-option value="life">生活美文</a-select-option>
        <a-select-option value="note">笔记</a-select-option>
        <a-select-option value="suanfa">算法</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="search()" style="margin-right: 15px;">查询</a-button>
      <a-button type="primary" @click="showModal(formState,'add')">添加文章</a-button>
    </a-form-item>
  </a-form>
  <a-table bordered :data-source="dataSource" :columns="columns" :loading="loading" :scroll="{ x: 1500, y: 700 }" :pagination="false">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'hot'">
        {{ record.hot==0?'否':'是' }}
      </template>
      <template v-if="column.dataIndex === 'original'">
        {{ record.original==0?'否':'是' }}
      </template>
      <template v-if="column.dataIndex === 'operation'">
        <a-popconfirm
          v-if="dataSource.length"
          title="确定删除?"
          @confirm="onDelete(record._id)"
        >
          <a>删除</a>
        </a-popconfirm>
        <a style="margin-left: 10px;" @click="showModal(record,'edit')">编辑</a>
        <a style="margin-left: 10px;" @click="queryDetail(record._id)">详情</a>
      </template>
    </template>
  </a-table>
  <div style="margin-top: 20px;text-align: right;">
    <a-pagination v-model:current="current" :total="total" @change="changePage" />
  </div>

  <a-modal v-model:open="open" width="1200px" title="添加文章" ok-text="确认" cancel-text="取消" @ok="hideModal">
    <a-form :model="formState" name="basic" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }" autocomplete="off">
      <a-form-item  label="文章标题" name="roleName" :rules="[{ required: true, message: '请输入文章标题' }]">
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item label="类型" name="type" :rules="[{ required: true, message: '请选择类型' }]">
        <a-select v-model:value="formState.labelType" placeholder="请选择类型">
          <a-select-option value="qianduan">前端选刊</a-select-option>
          <a-select-option value="life">生活美文</a-select-option>
          <a-select-option value="note">笔记</a-select-option>
          <a-select-option value="suanfa">算法</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item  label="摘要" name="order" :rules="[{ required: true, message: '请输入摘要' }]">
        <a-input v-model:value="formState.abstract" />
      </a-form-item>
      <a-form-item label="是否热门" name="hot">
        <a-radio-group v-model:value="formState['hot']">
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否原创" name="original">
        <a-radio-group v-model:value="formState['original']">
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item  label="转发链接" name="link" :rules="[{ required: false, message: '请输入转发链接' }]">
        <a-input v-model:value="formState.link" />
      </a-form-item>
      <a-form-item  label="文章内容" name="content" :rules="[{ required: true, message: '请输入文章内容' }]">
        <mavon-editor :ishljs="true" ref='md' v-model:value="formState.content"  @change="saveArticle" @imgAdd="imgAdd" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive, ref,} from 'vue';
import *as ArticleInfo from '../../../assets/api/article'
import { message } from 'ant-design-vue';

const columns = [
  { title: '文章ID', dataIndex: '_id', width: '15%', align:"center"},
  { title: '标题', dataIndex: 'title', align:"center"},
  { title: '摘要', dataIndex: 'abstract', align:"center"},
  { title: '标签', dataIndex: 'labelType', align:"center"},
  { title: '作者', dataIndex: 'author', align:"center"},
  { title: '阅读量', dataIndex: 'watch', align:"center"},
  { title: '热门文章', dataIndex: 'hot', align:"center",},
  { title: '原创', dataIndex: 'original', align:"center"},
  { title: '创建时间', dataIndex: 'createTime', align:"center"},
  { title: '操作', dataIndex: 'operation', width: '10%', align:"center"},
];

const md = ref()

const loading = ref(false)
const dataSource = ref([]);
const page = ref(1)
const current = ref(0)
const total = ref<number>()
let open = ref<boolean>(false);
let changeType = ref<string>('add');
// 添加角色信息
interface FormState {
  title: string;
  labelType: string | number;
  abstract: string;
  hot: string | number;
  original: string | number,
  link?: string;
  content: any;
  _id?:string;
  id?:string
}
const formState = reactive<FormState>({
  title: '',
  labelType: 0,
  abstract: '',
  hot: 0,
  original: 0,
  link: '',
  content: '',
  _id: ''
});
interface Formquery {
  username: string;
  labelType: string | number;
  status:string | number 
}
const formQuery = reactive<Formquery> ({
  username: '',
  labelType: "",
  status: ''
})
const showModal = (arg: FormState, str: string) => {
  if(str === 'edit'){
    formState.title = arg.title
    formState.labelType = arg.labelType
    formState.abstract = arg.abstract
    formState.hot = Number(arg.hot)
    formState.original = arg.original
    formState.link = arg.link
    formState.content = arg.content
    formState._id = arg._id
  }else{
    formState.title = ''
    formState.labelType = ''
    formState.abstract = ''
    formState.hot = 0
    formState.original = 0
    formState.link = ''
    formState.content = ''
  }
  changeType.value = str
  open.value = true;
};
// 添加文章
const hideModal = () => {
  let params: FormState = {
    title: formState.title,
    labelType: formState.labelType,
    abstract: formState.abstract,
    hot: formState.hot,
    original: formState.original,
    link: formState.link,
    content: formState.content
  }
  if(changeType.value === 'edit'){
    params.id = formState._id
    console.log(formState.content,'dsaffs')
    ArticleInfo.editArticle(params).then(res => {
      if(res.code === 200){
        message.success(res.msg)
        getList()
      }
    })
  }else{
    ArticleInfo.addArticle(params).then(res => {
      if(res.code === 200){
        message.success(res.msg)
        getList()
      }
    })
  }
  open.value = false;
};
// 获取角色列表
const getList = () =>{
  loading.value = true
  let params = {
    page: page.value,
    pageSize: 10,
    labelType: formQuery.labelType
  }
  ArticleInfo.queryArticleList(params).then(res =>{
    if(res.code === 200){
      loading.value = false
      dataSource.value = res.data?.list
      current.value = page.value
      total.value = res.data?.total
    }
  })
}
getList()
// 查询详情
const queryDetail = (id: string) => {
  ArticleInfo.queryArticleDetail(id).then(res => {
    if(res.code === 200){
      
    }
  })
}
// 删除角色
const onDelete = (id: string) => {
  ArticleInfo.deleteArticle(id).then(res => {
    if(res.code === 200){
      message.success(res.msg)
      getList()
    }
  })
};
// 搜索
const search = () => {
  getList()
}
// 翻页
const changePage = (e:number) => {
  page.value = e
  getList()
}

// 保存文章
const saveArticle = () => {
  formState.content = md.value.d_render
}
// 上传图片
const imgAdd = () => {

}
</script>
<style lang="less" scoped>
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }
  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }
  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
